Menu en CSS pur

Présentation

Pour donner à votre site un air agréable, professionnel et facile d'utilisation voici des menus basés sur le CSS et uniquement le CSS. Ces menus sont tous 'responsive', sauf indication contraire. C'est à dire qu'ils s'adaptent à tous les formats d'écran.

Je vous propose 77 menus au



Sur d'autres pages

[Menu JS] [Icône ham.] [Search box]

 

Mega menu horizontal

Ambure Mahesh

- Solution complète du desktop au mobile

Caractéristiques

  • Menu recouvrant par la gauche
  • Menu horizontal devenant vertical en mode mobile
  • Menu avec deux niveaux de sous-menus
  • Par Ambure Mahesh, Inde

Image cliquable pour voir le menu

mega menu par AmbureMahesh

Références

Site web

[Créé / modifié] [19-03-2024 / 19-03-2024]

Coding Master Web

- Solution complète du desktop au mobile
- Avec une vidéo Youtube

Caractéristiques

  • Menu poussant par le haut
  • Menu horizontal devenant vertical en mode mobile
  • Menu avec deux niveaux de sous-menus
  • Beaucoup de ressources sur ce site sympa

Image cliquable pour voir le menu

mega menu par CodingMasterWeb.com

Références

Site web

[Créé / modifié] [07-04-2022 / 07-04-2022]

Hassen123

- Solution complète du desktop au mobile

Caractéristiques

  • Menu recouvrant par la gauche
  • Menu horizontal devenant vertical en mode mobile
  • Menu avec deux niveaux de sous-menus
  • Très beau menu complet, tout en douceur
  • D'autres menus du même tonneau sur le site

Image cliquable pour voir le menu

mega menu par AmbureMahesh

Références

Site web

[Créé / modifié] [19-03-2024 / 19-03-2024]

Hma Blogs

- Solution complète du desktop au mobile
- Avec une vidéo Youtube

Caractéristiques

  • Menu recouvrant partiellement par le haut
  • Menu horizontal devenant vertical en mode mobile
  • Menu avec deux niveaux de sous-menus
  • Site de webdesign intéressant à visiter

Image cliquable pour voir le menu

HMA Blogs Design et son mega menu

Références

Site web

[Créé / modifié] [07-04-2022 / 07-04-2022]

Khurshi Ahsan

- Solution complète du desktop au mobile

Caractéristiques

  • Menu glissant par la droite
  • Menu horizontal devenant vertical
  • Menu avec de nombreux sous-menus

Image cliquable pour voir le menu

KhurshiAhsan

Références

Site web

[Créé / modifié] [11-12-2018 / 14-03-2021]

K. Victoria

- Solution complète du desktop au mobile

Caractéristiques

  • Méga menu responsive à plusieurs niveaux
  • Menu horizontal en mode desktop devenant vertical sur mobile
  • Menu hamburger glissant partiellement par la gauche
  • Rollover par inversion de couleurs
  • Suède

Image cliquable pour voir le menu

menu en CSS pur de K. Victoria

Références

Site web

[Créé / modifié] [30-03-2022 / 30-03-2022]

Philippot Armand - Tuto

- Solution complète du desktop au mobile.
- Il est sur plusieurs niveaux et c'est bien utile lorsque l'on a un site fourni.

Caractéristiques

  • Menu déroulant
  • Menu horizontal devenant vertical sur mobile
  • Turoriel sur le site de l'auteur (lien ci-dessous)

Image cliquable pour voir le menu

menu deroulant responsive tout en CSS

Références

Site web

[Créé / modifié] [20-10-2019 / 20-10-2019]

Ramirez Edwin

- Solution complète du desktop au mobile

Caractéristiques

  • Menu glissant par la gauche
  • Double réaction au survol
  • Très joli menu à double niveau

Image cliquable pour voir le menu

menu pour listes avec drop-down tout en CSS

Références

Site web

[Créé / modifié] [23-11-2018 / 09-11-2020]

 

Mega menu vertical

Css Script 3

- Peut servir du desktop au mobile

Caractéristiques

  • Menu glissant par la gauche
  • CSS, Normalize.css
  • Un peu de Javascript

Image cliquable pour voir le menu

menu de cssscript.com

Références

Site web

[Créé / modifié] [04-11-2018 / 09-11-2020]

Guataka dit GTK

- Solution mobile

Caractéristiques

  • CSS pur
  • Menu glissant par la gauche
  • Pour descendre on clique sur la flèche à droite du menu
  • Pour remonter, de niveau en niveau, on clique sur l'icône hamburger
  • Solution originale
  • Jakarta, Indonésie

Image cliquable pour voir le menu

menu en pur CSS

Références

Site web

[Créé / modifié] [12-08-2022 / 12-08-2022]

 

Menu horizontal en CSS pur

Arika O

- Solution complète du desktop au mobile

Caractéristiques

  • CSS pur
  • Menu horizontal en mode desktop devenant vertical sur mobile
  • Menu hamburger poussant par le haut
  • Aucun rollover
  • Menu très simple et en code et à mettre en oeuvre, d'où sont intérêt

Image cliquable pour voir le menu

menu de Arika O

Références

Site web

[Créé / modifié] [12-08-2022 / 12-08-2022]

Bodake Sanket

- Solution complète du desktop au mobile

Caractéristiques

  • CSS pur
  • Menu horizontal en mode desktop devenant vertical sur mobile
  • Menu hamburger glissant partiellement par la gauche
  • Léger rollover sur la ligne de menu
  • Pune, Inde

Image cliquable pour voir le menu

menu de Bodake Sanket

Références

Site web

[Créé / modifié] [01-02-2022 / 02-02-2022]

Coding Nepal - Tuto

- Solution complète du desktop au mobile
- Coding Nepal sur Dev.to

Caractéristiques

  • Menu horizontal devenant vertical en mode mobile
  • Menu recouvrant partiellement par la gauche (en mode mobile)
  • Proposition de recherche très propre
  • Avec tutoriel vidéo
  • Site de l'auteur à visiter absolument

Image cliquable pour voir le menu

menu classique recouvrant par la gauche, responsive

Références

Site web

Site de l'auteur

[Créé / modifié] [25-04-2022 / 25-04-2022]

Css Portal

- Générateur
- Solution complète du desktop au mobile

Caractéristiques

  • Menu fixe, déroulant vers le bas
  • Il est possible, dans ce générateur, de créer, supprimer, déplacer les lignes de menu
  • Toutes les couleurs sont modifiables, y compris celles du dégradé
  • Une rupture à 800px;

Image cliquable pour voir le menu

generateur de menu CSS responsive

Références

Site web

[Créé / modifié] [16-03-2022 / 16-03-2022]

Css Script

- Solution complète du desktop au mobile

Caractéristiques

  • Menu fixe, sur une seule ligne
  • Menu avalant par la droite

Image cliquable pour voir le menu

menu de cssscript.com

Références

Site web

[Créé / modifié] [04-11-2018 / 04-11-2018]

Dubroeucq Vincent - Tuto

- Solution complète du desktop au mobile

Caractéristiques

  • Menu horizontal devenant vertical
  • Glisse par la droite
  • Avec tutoriel

Image cliquable pour voir le menu

menu en pure CSS glissant

Références

Site web

[Créé / modifié] [28-06-2019 / 28-06-2019]

Kocsten

- Solution complète du desktop au mobile

Caractéristiques

  • Menu horizontal en mode desktop devenant vertical sur mobile
  • Menu hamburger recouvrant totalement par la gauche
  • Bandeau haut en position fixe
  • Pas de rollover sur l'icône hambugerr mais sur chaque ligne de menu. Ils diffèrent dans les deux modes
  • Menu simple mais efficace
  • Russie

Image cliquable pour voir le menu

menu horizontal en CSS3 recouvrant totalement

Références

Site web

[Créé / modifié] [23-02-2022 / 23-02-2022]

Lindqvist Oscar

- Solution complète du desktop au mobile

Caractéristiques

  • Menu horizontal en mode desktop devenant vertical sur mobile
  • Menu hamburger recouvrant partiellement par le haut
  • Bandeau haut en position fixe
  • Pas de rollover sur l'icône hamburger mais sur chaque ligne de menu
  • Menu simple mais efficace
  • Stockholm, Suède

Image cliquable pour voir le menu

menu horizontal en mode desktop devenant vertical sur mobile

Références

Site web

[Créé / modifié] [14-02-2022 / 14-02-2022]

Log Rocket - Ivy Walobwa

- Solution complète du desktop au mobile

Caractéristiques

  • CSS pur avec tutoriel en pas à pas
  • Recouvrant complètement par le haut
  • Horizontal sur desktop et tablette, devient vertical sur mobile
  • Boston, USA

Image cliquable pour voir le menu

menu css recouvrant par le haut avec tuto

Références

Site web

Site de l'auteur

Source

[Créé / modifié] [04-02-2022 / 04-02-2022]

Mulligan Ryan 2

- Solution du desktop au mobile

Caractéristiques

  • Concept de menu fixe responsive
  • Les formes colorées derrière le texte de chaque entrée de menu bougent sans cesse
  • Au moment du rollover la forme concernée s'étire puis se fige
  • Au clic elle reste figée
  • C'est sympa et gai
  • USA

Image cliquable pour voir le menu

menu css fixe responsive avec jeu de couleurs

Références

Site web

[Créé / modifié] [04-03-2022 / 04-03-2022]

Mulligan Ryan 2

- Solution mobile

Caractéristiques

  • Recouvrant complètement par la gauche
  • Avec effet de lignes fuyantes
  • Belles translations

Image cliquable pour voir le menu

menu css recouvrant par la gauche avec effet de lignes

Références

Site web

[Créé / modifié] [21-09-2020 / 21-09-2020]

Pietrusky Tim 2

- Solution complète du desktop au mobile

Caractéristiques

  • Menu toujours visible
  • Menu horizontal devenant vertical
  • Menu poussant par la gauche
  • Double effet au survol

Image cliquable pour voir le menu

menu poussant par la gauche avec double rollover

Références

Site web

[Créé / modifié] [26-03-2019 / 26-03-2019]

Pure Css 2

- Solution complète du desktop au mobile

Caractéristiques

  • Menu horizontal à défilement
  • Réaction au clic

Image cliquable pour voir le menu

PureCss menu

Références

Site web

[Créé / modifié] [02-01-2018 / 02-01-2018]

Pure Css 3

- Solution complète du desktop au mobile

Caractéristiques

  • Menu poussant par le haut
  • Menu horizontal devenant vertical
  • Réaction au clic

Image cliquable pour voir le menu

menu css reponsive poussant par le haut

Références

Site web

[Créé / modifié] [02-01-2018 / 02-01-2018]

Trigo Alvaro

- Solution complète du desktop au mobile

Caractéristiques

  • Menu horizontal devenant vertical en mode mobile
  • Menu hamburger glissant par la gauche
  • Landing page pour restaurant
  • Cambridge, Royaume Uni

Image cliquable pour voir le menu

menu responsive

Références

Site web

[Créé / modifié] [14-02-2022 / 14-02-2022]

Turton Tabitha

- Solution complète du desktop au mobile

Caractéristiques

  • Menu hamburger glissant par le haut
  • Menu horizontal devenant vertical en mode mobile
  • Geek, spécialiste des technologies

Image cliquable pour voir le menu

menu responsive

Références

Site web

[Créé / modifié] [26-03-2019 / 26-03-2019]

Walobwa Ivy

- Solution complète du desktop au mobile
- Avec tutoriel sympa

Caractéristiques

  • Menu horizontal devenant vertical en mode mobile
  • Menu hamburger recouvrant totalement par le haut
  • Une rupture à 768px
  • Impeccable
  • Kénya

Image cliquable pour voir le menu

menu responsive horizontal en CSS pur, devaenant vertical en mode mobile

Références

Site web

Télécgargement

[Créé / modifié] [04-03-2022 / 04-03-2022]

Zeng Ally

- Solution complète du desktop au mobile

Caractéristiques

  • Menu hamburger recouvrant totalement
  • Menu horizontal devenant vertical en mode mobile
  • Icône hamburger
  • Impeccable

Image cliquable pour voir le menu

menu responsive en CSS pur

Références

Site web

[Créé / modifié] [21-08-2021 / 21-08-2021]

 

Menu vertical en CSS pur

Amli

- Solution mobile
- Créateur de design, passionnant !

Caractéristiques

  • Menu glissant par la droite
  • Ne se referme pas quand on actionne la croix en mode mobile
  • Solution très simple mais très efficace
  • J'aime beaucoup l'ectrême delicatesse de ce menu

Image cliquable pour voir le menu

menu css pur glissant par la droite

Références

Site web

[Créé / modifié] [07-08-2020 / 07-08-2020]

Augusto Fabricio - Goiania - GO, Brésil

- Solution mobile

Caractéristiques

  • Menu poussant par la gauche
  • Avec transition de décalage

Image cliquable pour voir le menu

menu en CSS pur, poussant par la gauche

Références

Site web

[Créé / modifié] [21-08-2021 / 21-08-2021]

Bernabè Simone

- Solution plutôt destinée au mobile

Caractéristiques

  • CSS pur
  • Menu vertical recouvrant partiellement par la gauche
  • Jolie proposition
  • Italie

Image cliquable pour voir le menu

menu hamburger recouvrant par la gauche en CSS pur

Références

Site web

[Créé / modifié] [09-06-2022 / 09-06-2022]

Bodake Sanket (2)

- Solution pour mobile

Caractéristiques

  • CSS pur
  • Menu vertical recouvrant totalement par la gauche
  • Menu aligné verticalement au centre
  • Rollover sur la ligne de menu, pas sur l'icône hamburger
  • Pune, Inde

Image cliquable pour voir le menu

menu hamburger de Bodake Sanket en CSS pur

Références

Site web

[Créé / modifié] [01-02-2022 / 01-02-2022]

Botirla Sorin

- Solution mobile

Caractéristiques

  • CSS pur
  • Réaction au survol
  • Comme une vague qui remplit un carré
  • C'est le rond qui entoure l'icône hamburger qui se transforme en carré
  • Rollover sur les lignes de menu
  • Bucarest, Roumanie

Image cliquable pour voir le menu

menu en CSS pur avec une vague qui remplit un carre

Références

Site web

[Créé / modifié] [07-05-2022 / 07-05-2022]

Bué Matthieu

- Solution mobile

Caractéristiques

  • Menu glissant par la gauche et recouvrant totalement l'écran
  • Icône hamburger
  • CSS, Normalize.css
  • jQuery dans le code ????
  • Matthieu Bué est concepteur Web, développeur front-end et enseignant html/css

Image cliquable pour voir le menu

menu responsive en 'CSS pure' pour mobile seulement

Références

Site web

[Créé / modifié] [25-11-2020 / 25-11-2020]

Chandler Joanna - Cleveland, USA

- Solution mobile

Caractéristiques

  • Menu hamburger se déployant au clic
  • Les barres de l'icône servent de séparateur
  • Original et ingénieux !

Image cliquable pour voir le menu

menu hamburger avec jolie transition

Références

Site web

[Créé / modifié] [11-10-2021 / 11-10-2021]

Code Convey - Tuto

- Solution mobile

Caractéristiques

  • Menu poussant par la gauche
  • Avec tutoriel

Image cliquable pour voir le menu

Code Convey menu css pur avec transition

Références

Site web

[Créé / modifié] [27-05-2020 / 09-11-2020]

Code Him - Tuto

- Solution mobile
- Ce site propose tout un tas de ressources

Caractéristiques

  • Menu fixe toujours visible
  • Menu accordéon
  • Avec tutoriel

Image cliquable pour voir le menu

menu accordéon vertical, responsive

Références

Site web

[Créé / modifié] [03-08-2020 / 03-08-2020]

Css Script 4

- Solution mobile

Caractéristiques

  • Menu glissant par la droite
  • Très belles transisitions et "double salto arriè" de l'icône hamburger

Image cliquable pour voir le menu

menu hamburger vertical glissant pour mobile seulement

Site web

[Créé / modifié] [01-12-2020 / 01-12-2020]

DAdam

- Solution mobile

Caractéristiques

  • Menu "STAR Wars" glissant par la gauche
  • Icône hamburger particuliaegrave;rement travaillé
  • C'est une présentation originale et spécifique
  • Quasi en CSS pur

Image cliquable pour voir le menu

menu vertical glissant par la gauche facon Star Wars

Références

Site web

[Créé / modifié] [01-12-2020 / 01-12-2020]

Fernandes Dilson

- Solution mobile

Caractéristiques

  • Menu Hamburger
  • Recouvrant totalement à partir du centre du bouton
  • Effet circulaire de déploiement
  • Retour à la position d'origine avec transition douce

Image cliquable pour voir le menu

menu en CSS pur, recouvrant totalement

Références

Site web

[Créé / modifié] [09-10-2021 / 09-10-2021]

Free Sean

- Solution complète du desktop au mobile

Caractéristiques

  • Menu hamburger
  • Recouvre par la gauche
  • Les lignes de menu s'affichent avec un très léger décalage dans le temps
  • La zone hors menu ets opacifiée
  • Jolie proposition
  • Greenville, Caroline du Sud, USA

Image cliquable pour voir le menu

menu hamburger recouvrant par la gauche avec fond restant opaque

Références

Site web

Site de l'auteur

[Créé / modifié] [04-01-2022 / 04-01-2022]

Gillenwater Zoe

- Solution mobile

Caractéristiques

  • Pousse brutalement par la gauche
  • Le menu occupera toujours la hauteur de la page, se redimentionnant au fur et à mesure
  • Utilisation de flexbox pour éviter les débordements

Image cliquable pour voir le menu

menu en CSS pur, poussant par la gauche

Références

Site web

[Créé / modifié] [23-02-2022 / 23-02-2022]

Gonzalves Lm

- Solution mobile

Caractéristiques

  • Morphing Hamburger Menu
  • Menu poussant par le haut avec une belle transition sur les lignes de menu
  • Effet circulaire de déploiement

Image cliquable pour voir le menu

menu en CSS pur, poussant par le heut

Références

Site web

[Créé / modifié] [18-10-2020 / 18-10-2020]

Grozdic Ivan

- Solution mobile

Caractéristiques

  • Le cercle animé, qui entoure l'icône hamburger, est projeté, style missile, vers le centre où il explose recouvrant entièrement la page
  • La page recouverte le menu apparaît avec léger décalage à l'affichage des lignes de menu
  • Joli mouvement de l'icône hamburger au clic
  • Rollover sur les lignes de menu
  • Mouvement inverse à la fermeture
  • Rascie, Serbie

Image cliquable pour voir le menu

menu recouvrant par le centre totalement

Références

Site web

Site de l'auteur

[Créé / modifié] [25-04-2022 / 25-04-2022]

Ichinose Takane

- Solution mobile

Caractéristiques

  • Menu recouvrant par le coin haut droit dans un mouvement circulaire
  • CSS, Normalize.css
  • Les lignes de menu s'affichent de la gauche vers la droite avec un délai de retard croissant
  • Joli effet de transparence
  • Kanagawa, Japon

Image cliquable pour voir le menu

menu recouvrant par la droite totalement

Références

Site web

[Créé / modifié] [11-01-2022 / 11-01-2022]

iGadget

- Solution mobile

Caractéristiques

  • Menu recouvrant par la droite
  • Rollover sur la croix, rollover sur la flèche
  • Le menu glisse précédé d'une vague
  • Il se retire de la même manière
  • Menu ouvert l'ascenseur droit permet de faire défiler le contenu
  • Berlin, Allemagne

Image cliquable pour voir le menu

menu recouvrant par la droite partiellement avec transparence totale

Références

Site web

[Créé / modifié] [21-01-2022 / 21-01-2022]

iGadget (2)

- Solution mobile mais peut être utilisé sur desktop

Caractéristiques

  • Menu poussant par la droite
  • Pas de rollover sauf sur les lignes de menu
  • Plus que le menu qui pousse on a l'impression que c'est l'espace contenu qui se rétracte
  • Berlin, Allemagne

Image cliquable pour voir le menu

menu poussant par la droite provoquant un phenomene de retractation du contenu

Références

Site web

[Créé / modifié] [16-03-2022 / 16-03-2022]

Insolera Marcello

- Solution mobile

Caractéristiques

  • Menu recouvrant par la gauche de manière oblique
  • CSS, Normalize.css
  • Les lignes de menu s'affichent en bloc
  • Hambourg, Allemagne

Image cliquable pour voir le menu

menu recouvrant par la droite totalement

Références

Site web

[Créé / modifié] [13-01-2022 / 13-01-2022]

Jassal Arjan

Caractéristiques

  • Menu fixe, vertical, toujours visible
  • Effet de rotatio 3D
  • Un seul état multisupports

Image cliquable pour voir le menu

menu vertical sans Javascript (pur CSS)

Références

Site web

[Créé / modifié] [21-08-2020 / 21-08-2020]

Jeem Naim

- Solution mobile
- Très subtile

Caractéristiques

  • Menu poussant vers le bas
  • Effet circulaire de déploiement
  • Jeem Naim, du Bangladesh, est un programmeur passionné amoureux de Linux, il aime relever des défis

Image cliquable pour voir le menu

menu avec poussee circulaire en pure CSS

Références

Site web

[Créé / modifié] [25-11-2020 / 25-11-2020]

Kreoger Tracy

- Solution mobile

Caractéristiques

  • Menu recouvrant par la droite
  • CSS, Normalize.css
  • Joli mouvement de retrait de l'icône hamburger
  • Les lignes de menu s'affichent de la gauche vers la droite avec un délai de retard croissant

Image cliquable pour voir le menu

menu recouvrant par la droite avec menu hamburger

Références

Site web

[Créé / modifié] [11-01-2022 / 11-01-2022]

Kuhn Adam

- Solution complète du desktop au mobile

Caractéristiques

  • Menu déroulant par le haut
  • Menu horizontal devenant vertical
  • Ne se referme pas quand on actionne la croix

Image cliquable pour voir le menu

menu deroulant par le haut

Références

Site web

[Créé / modifié] [25-04-2020 / 25-04-2020]

Martínez Marín Elena

- Solution mobile

Caractéristiques

  • Menu hamburger glissant par la gauche
  • Menu recouvrant entièrement
  • Décalage du glissement à chaque ligne de menu
  • Double réaction au passage de la souris
  • CSS, très peu de JS
  • Jolie présentation

Image cliquable pour voir le menu

menu horizontal glissant par la gauche

Références

Site web

[Créé / modifié] [18-11-2020 / 18-11-2020]

Morando Sebastiano

- Solution mobile

Caractéristiques

  • Menu recouvrant totalement
  • CSS pur
  • Aucune dépendance
  • Les lignes de menu s'affichent l'une après l'autre par le bas
  • À cela s'ajoute un joli dégradé gris clair
  • Verone, Italie

Image cliquable pour voir le menu

menu recouvrant totalement

Références

Site web

[Créé / modifié] [13-01-2022 / 13-01-2022]

Rakib Mostafa

- Solution mobile

Caractéristiques

  • Menu recouvrant par la gauche ou la droite, au choix
  • Rollover sur tous les éléments
  • L'icône hamburger garde une position fixe

Image cliquable pour voir le menu

Pure Css menu, sans Javascript

Références

Site web

[Créé / modifié] [04-03-2022 / 04-03-2022]

Shak Daniel

- Solution mobile

Caractéristiques

  • Menu recouvrant par le centre
  • Bouton de navigation fixe, toujours visible

Image cliquable pour voir le menu

PureCss menu

Références

Site web

[Créé / modifié] [04-12-2018 / 04-12-2018]

Simic Antonija

- Solution plutôt mobile

Caractéristiques

  • Menu hamburger pleine page
  • Le menu recouvre la page entièrement par la droite en mode mobile
  • Sur grand écran il est accompagné d'un espace qui descend par le haut gauche
  • C'est bien fait même si je n'en vois pas vraiment l'utilité

Image cliquable pour voir le menu

menu hamburger a double recouvrement

Références

Site web

[Créé / modifié] [07-04-2022 / 07-04-2022]

Simmons Chris

- Solution mobile, possible sur desktop

Caractéristiques

  • Menu hamburger
  • Le contenu de la page s'efface pour laisser apparaître le menu
  • Ce retrait se fait en perspective

Image cliquable pour voir le menu

menu hamburger apparaissant

Références

Site web

[Créé / modifié] [04-01-2022 / 04-01-2022]

Slutzki Adir

- Solution mobile

Caractéristiques

  • Menu hamburger recouvrant partiellement par surimpression
  • CSS pur
  • Rollover sur tous les éléments
  • Menu simple et très plaisant
  • Tel-Aviv, Israël

Image cliquable pour voir le menu

menu recouvrant par surimpression

Références

Site web

Site de l'auteur

[Créé / modifié] [04-02-2022 / 04-02-2022]

Stumpel Cyd

- Solution mobile

Caractéristiques

  • Menu recouvrant totalement par la droite dans un phénomène de bascule
  • CSS pur
  • Amsterdam, Pays-Bas

Image cliquable pour voir le menu

menu recouvrant par la droite avec un phenomene de bascule

Références

Site web

Site de l'auteur

[Créé / modifié] [11-01-2022 / 11-01-2022]

Sullivan Paul

- Solution mobile

Caractéristiques

  • Menu hamburger glissant par la gauche
  • Menu recouvrant entièrement
  • Bouton de navigation fixe, toujours visible

Image cliquable pour voir le menu

menu hamburger glissant en plein ecran

Références

Site web

[Créé / modifié] [02-01-2019 / 02-01-2019]

Terwan Erik

- Solution mobile

Caractéristiques

  • Menu recouvrant par la gauche
  • CSS pur
  • Aucune dépendance
  • Les lignes de menu s'affichent en bloc, d'abord doucement puis rapidement pour finir
  • Ce mouvement est original
  • Pays-Bas

Image cliquable pour voir le menu

menu recouvrant par la gauche avec une double vitesse

Références

Site web

[Créé / modifié] [13-01-2022 / 13-01-2022]

Tiwari Gautam - Uttarakhand, Inde

- Solution globale plutôt orienté mobile

Caractéristiques

  • Menu responsive avec rupture à 520px
  • Menu recouvrant partiellement
  • Gautam Tiwari est un développeur front-end qui aime développer des composants au pixel près en utilisant uniquement HTML et CSS

Image cliquable pour voir le menu

menu en CSS pure

Références

Site web

Site de l'auteur

[Créé / modifié] [21-08-2021 / 21-08-2021]

Vinther Dannie

- Solution mobile

Caractéristiques

  • CSS pur
  • Menu glissant et recouvrant par la gauche
  • Pas de rollover sur l'icône hamburger. Il y en a sur les lignes de menu
  • Conservation d'une zone d'en-tête
  • Copenhague, Danemark

Image cliquable pour voir le menu

menu en CSS pur glissant et recouvrant par la gauche

Références

Site web

[Créé / modifié] [07-05-2022 / 07-05-2022]

Vitas Filip

- Solution mobile

Caractéristiques

  • CSS pur
  • Menu recouvrant totalement par le haut
  • Pas de rollover sur l'icône hamburger
  • Rollover sur les lignes de menu
  • Belgrade, Serbie

Image cliquable pour voir le menu

menu en CSS pure

Références

Site web

[Créé / modifié] [01-02-2022 / 01-02-2022]

Wifeo

- Solution mobile

Caractéristiques

  • CSS pur
  • Menu recouvrant partiellement par le haut, par strates. On peut dire aussi: En escalier inversé
  • Le déploiement de déclenche au survol
  • Pas de rollover sur les lignes de menu
  • Original

Image cliquable pour voir le menu

menu en CSS pur

Références

Site web

[Créé / modifié] [01-05-2022 / 01-05-2022]

 

Menu circulaire en CSS pur

Deren - Moléculaire

- Solution mobile

Caractéristiques

  • Menu hamburger devenant tentaculaire
  • Il faut cliquer sur l'icône hamburger pour voir apparaître le premier niveau de menu. Un simple survol, en mode desktop, suffit pour le second
  • Concept assez abouti
  • Tokyo, Japon

Image cliquable pour voir le menu

menu hamburger et circulaire

Références

Site web

Site de l'auteur

[Créé / modifié] [14-02-2022 / 14-02-2022]

Fuzinato Dario - Circulaire

- Solution mobile

Caractéristiques

  • Rollovers dans tous les cas
  • Au clic, déploiement circulaire de six ronds
  • Le déploiement circulaire commence vers le bas avec un positionnement du rond de menu plus ou moins rapide en fonction de la distance à parcourir
  • Mouvement identique pour le retour
  • Berlin, Allemagne

Image cliquable pour voir le menu

menu circulaire progressif

Références

Site web

[Créé / modifié] [01-05-2022 / 01-05-2022]

Estrella Ricardo - Circulaire

- Solution mobile

Caractéristiques

  • Menu hamburger à affichage circulaire
  • Le survol du signe '+' central fait s'afficher progressivement tous les icônes avec une rotation de 90 degrés
  • Rollover sur tous les boutons du menu
  • Estrella Ricardo alias Rick Brunner
  • Walnut Creek, Californie, USA

Image cliquable pour voir le menu

menu circulaire en css pur

Références

Site web

[Créé / modifié] [09-06-2022 / 09-06-2022]

Hall-Coates Colin - Circulaire

- Solution mobile

Caractéristiques

  • Menu hamburger à affichage circulaire
  • Un clic sur l'icône hamburger fait s'afficher progressivement tous les icônes de premier niveau
  • Très très léger rollover sur tous les boutons
  • Canada

Image cliquable pour voir le menu

menu hamburger, circulaire

Références

Site web

[Créé / modifié] [14-02-2022 / 14-02-2022]

Kostadin alias @Logrithumn - Circulaire

- Solution mobile

Caractéristiques

  • Menu hamburger sans rollover
  • Au clic une couronne l'entoure
  • Rollover sur les composants de cette couronne
  • Elle tourne en cliquant sur la flèche faisant défiler le menu dans un sens puis dans l'autre

Image cliquable pour voir le menu

menu hamburger et circulaire

Références

Site web

[Créé / modifié] [21-01-2022 / 21-01-2022]

Kostadin alias @Logrithumn (2) - Rectangulaire

- Solution mobile

Caractéristiques

  • Menu sans rollover sur le premier carré
  • Au clic, un premier carré sort de manière circulaire et vient se positionner sur la pointe du carré principal
  • Puis 2 fois 2 carrés sortent du dessous du grand carré
  • Une fois tous sortis, le premier carré semble se soulever
  • Rollover sur chacun des petits carrés qui fait se tasser celui-ci puis se soulever ensuite

Image cliquable pour voir le menu

menu rectangulaire en pur CSS

Références

Site web

[Créé / modifié] [21-01-2022 / 21-01-2022]

LaChance Jasper - Circulaire

- Solution mobile

Caractéristiques

  • Rollover sur l'icône hamburger
  • Au clic, déploiement circulaire de six autres icônes
  • Rollover par complémentarité sur chacun des images du menu
  • Les icônes du menu se replient tous d'un coup
  • Canada

Image cliquable pour voir le menu

menu hamburger circulaire total

Références

Site web

Site de l'auteur

[Créé / modifié] [21-01-2022 / 21-01-2022]

McKinney Erin - Circulaire

- Solution mobile
- Semble s'être très largement inspiré de Weiss Hadar

Caractéristiques

  • Rollover sur les ronds colorés de menu : Diminution de la couleur du fond et augmentation de celle de l'icône
  • Pas de rollover sur l'icône hamburger
  • Au clic, déploiement circulaire de six ronds avec une transition de fondu
  • Jacksonville, Caroline du Nord, USA

Image cliquable pour voir le menu

menu circulaire

Références

Site web

[Créé / modifié] [01-05-2022 / 01-05-2022]

Riordan John - Semi circulaire

- Solution mobile

Caractéristiques

  • Rollover sur les ronds colorés de menu : Auréole
  • Pas de rollover sur l'icône '+' ou '-'
  • Au clic, déploiement semi circulaire de cinq ronds avec très léger rebond

Image cliquable pour voir le menu

menu semi circulaire gauche

Références

Site web

[Créé / modifié] [04-01-2022 / 04-01-2022]

Weiss Hadar - Circulaire

- Solution mobile

Caractéristiques

  • Rollover sur tous les icônes
  • Au clic, déploiement par le centre des sociaux avec un bel effet de fondu au départ
  • Idem à la fermeture, les sociaux, dans un mouvement circulaire se fondent dans le point central
  • Très jolie proposition

Image cliquable pour voir le menu

menu circulaire pour mobile

Références

Site web

[Créé / modifié] [23-02-2022 / 23-02-2022]